import { createApp } from 'vue'
import router from '@/router/index'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import 'ant-design-vue/dist/reset.css'
import Antd, { message } from 'ant-design-vue'
import App from './App.vue'
import hljs from '@/assets/highlight/highlight.min.js'
import Particles from "@tsparticles/vue3";
// import 'highlight.js/styles/a11y-dark.css'
import './assets/main.css'
import '@/assets/highlight/styles/googlecode.css'
import './monaco'
import { registerMicroApps, start } from 'qiankun'
import { loadSlim } from "@tsparticles/slim"
import { apps } from './microApps'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
const app = createApp(App)

app.directive('highlight', function (el) {
    const blocks = el.querySelectorAll('pre code')
    blocks.forEach((block) => {
        hljs.highlightBlock(block)
    })
})
// @ts-ignore
message.config({
    duration: 2,
    maxCount: 3,
    top: '8px'
})
;(app.config as any).devtools = process.env.NODE_ENV !== 'production'

registerMicroApps(apps)
start()
app.use(Antd)
    .use(Particles, {
        init: async (engine) => {
            await loadSlim(engine)
        }
    })
    .use(pinia)
    .use(router)
    .use(ElementPlus)
    .mount('#app')
